<template>
  <el-row>
    <el-col :span="24">
      <el-form :model="tiger" label-width="auto" style="max-width: 600px">
        <el-form-item label="老虎名字">
          <el-input v-model="tiger.tigerName" />
        </el-form-item>
        <el-form-item label="老虎年龄">
          <el-input v-model="tiger.tigerAge" />
        </el-form-item>
        <el-form-item label="老虎工资">
          <el-input v-model="tiger.tigerSalary" />
        </el-form-item>
        <el-button type="primary" size="large" @click="submitClickHandler">数据更新</el-button>
      </el-form>
    </el-col>
  </el-row>
</template>

<script setup>
// -------------------导入区-------------------
import {useRoute, useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import axiosInstance from '../config/axios.js';
import {ElMessage} from "element-plus";

// -------------------数据区-------------------
let route = useRoute();
let router = useRouter();

let tiger = ref({});

// -------------------功能区-------------------
onMounted(async () => {
  // 在组件加载完成之后，给后端发请求，索取回显表单所需要的 Tiger 对象数据
  let {data} = await axiosInstance.get(`/tiger/${route.query.tigerId}`);

  // 那响应体数据中的 data 属性（Result 的 data 属性）给响应式数据的 value 属性赋值
  tiger.value = data.data;
});

const submitClickHandler = async () => {
  await axiosInstance.put("/tiger", tiger.value);

  ElMessage.success("Oh yeah!更新成功！");

  await router.push("/page");
}
</script>

<style scoped>

</style>